<template>
    <div class="info-content">

        <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        <span style="color:red">*</span>
                        标题
                    </div>
                </template>
                <el-input v-model="main.title" type="text" placeholder="请输入" />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        页面背景色
                    </div>
                </template>
                <el-color-picker v-model="main.bg_color" show-alpha />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        标题背景
                    </div>
                </template>
                <el-color-picker v-model="main.title_bg_color" show-alpha />
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">
                        文字颜色
                    </div>
                </template>
                <el-color-picker v-model="main.title_color" show-alpha />
            </el-descriptions-item>
        </el-descriptions>

        <div class="e-cell " style="margin-top: 20px;">
            <div class="e-label">背景图</div>
            <el-upload class="avatar-uploader" :action="`${$api}/common/upload/pic`" :headers="{
            token: $pinia.state.value.store.token
        }" :show-file-list="false" :on-success="handleSuccess">
                <img v-if="main.bg_img" :src="$imgUrl + main.bg_img" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
                <el-icon v-if="main.bg_img" class="img-close-icon" @click.stop="main.bg_img = ''">
                    <CircleClose />
                </el-icon>
            </el-upload>
        </div>

    </div>
</template>

<script setup>

const props = defineProps({
    info: {
        required: true,
        default: {
        }
    },
});

const data = reactive({
    main: {
        list: []
    }
})
const { main } = toRefs(data)
onMounted(() => {
    data.main = props.info
})


function handleSuccess(res, index) {
    var img = ''
    if (res.code === 0) {
        img = res.data.url
    }
    data.main.bg_img = img
}
</script>

<style lang="scss" scoped>
.info-content {
    padding: 20px;

    .e-cell {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .e-label {
            margin-right: 20px;
        }
    }
}
</style>